<template>
  <div class="perfAnalysis">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="perfAnalysisMain">
      <div class="linxing1">
        <span class="count">{{ chartData[0].Count }}</span>
        <span class="name">{{ chartData[0].Name }}</span>
      </div>
      <div class="linxing2">
        <span class="count">{{ chartData[1].Count }}</span>
        <span class="name">{{ chartData[1].Name }}</span>
      </div>
      <div class="linxing3">
        <span class="count">{{ chartData[2].Count }}</span>
        <span class="name">{{ chartData[2].Name }}</span>
      </div>
      <div class="linxing4">
        <span class="count">{{ chartData[3].Count }}</span>
        <span class="name">{{ chartData[3].Name }}</span>
      </div>
      <div class="linxing5">
        <span class="count">{{ chartData[4].Count }}</span>
        <span class="name">{{ chartData[4].Name }}</span>
      </div>
      <div class="linxing6"></div>
      <div class="linxing7"></div>
      <div class="linxing8"></div>
    </div>
  </div>
</template>

<script>
import lRTitle from './lRTitle.vue';
export default {
  name: "perfAnalysis",
  components: { lRTitle },
  data() {
    return {
      statusTitle: "日志数据分布图"
    }
  },
  props: {
    chartData: {
      type: Array,
      default: [
        { Name: '沟通回溯', Count: 0 },
        { Name: '屏幕录像', Count: 0 },
        { Name: '域名解析', Count: 0 },
        { Name: '绩效分析', Count: 0 },
        { Name: '工作流水', Count: 0 },
      ]
    }
  },
  mounted() {
  },
  methods: {

  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.perfAnalysis {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}

.perfAnalysisMain {
  position: relative;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  background: url('~@/assets/aiScreen/dipan@2x.png') no-repeat center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  .linxing1,
  .linxing2,
  .linxing3,
  .linxing4,
  .linxing5,
  .linxing6,
  .linxing7,
  .linxing8,
  .linxing9 {
    background: url('~@/assets/aiScreen/linxing@2x.png') no-repeat center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    .count{
      color: #0BEAF2;
      font-size: 18px;
      margin-bottom: 5px;
      padding-left: 5px;
    }
    .name{
      color: #b6c1c6;
      font-size: 12px;
      padding-left: 5px;
    }
  }

  .linxing1 {
    width: 25%;
    height: 55%;
    margin: 0 auto;
  }

  .linxing2 {
    position: absolute;
    width: 22%;
    height: 50%;
    top: 5%;
    left: 65%;
  }

  .linxing3 {
    position: absolute;
    width: 22%;
    height: 50%;
    top: 40%;
    left: 20%;
  }

  .linxing4 {
    position: absolute;
    width: 22%;
    height: 50%;
    top: 45%;
    left: 52%;
  }

  .linxing5 {
    position: absolute;
    width: 22%;
    height: 50%;
    top: 1%;
    left: 10%;
  }

  .linxing6 {
    position: absolute;
    width: 17%;
    height: 32%;
    top: 50%;
    left: 0%;
    opacity: .6;
  }

  .linxing7 {
    position: absolute;
    width: 17%;
    height: 32%;
    top: 50%;
    left: 80%;
    opacity: .6;
  }

  .linxing8 {
    position: absolute;
    width: 17%;
    height: 32%;
    top: 10%;
    left: 88%;
    opacity: .6;
  }
}</style>